<template>
    <div class="box">
        <button class="my-btn" :class="{ 'disab': isDisabled }" @click="next" :disabled="isDisabled">
            <count-down :countTime="countTime" :endText="endText" @countEnd="countEnd"></count-down>
        </button>
    </div>
</template>

<script>
import CountDown from 'components/count-down.vue'

export default {
    props: {

        endText: {
            type: String,
            default: '下一步'
        }
    },
    components: {
        CountDown
    },
    data() {
        return {
            isDisabled: true,
            countTime: {
                minute: 0,
                second: 10
            }
        }
    },
    methods: {
        next() {
            this.$emit('next')
        },
        countEnd() {
            this.isDisabled = false
        }
    }
}
</script>

<style lang="scss" scoped>
.box {
    padding: 1rem 1rem 0;
}
.my-btn {
    font-size: 1.6rem;
    text-align: center;
    padding: 1rem 0;
    color: #fff;
    width: 100%;
    background: linear-gradient(to bottom, #9dee7b , #71b25b);
    border: none;
    border-radius: 0.5rem;
}
.disab {
    background: #ccc;
    color: #000;
}
</style>
